<template>
	<!-- 关于我们 -->
	<view class="notice-list">
		<div style="padding: 30rpx 20rpx;">
			<view class="notice-item">
				<view v-if="!isEditActive" v-for="(item, index) in items" :key="index" class="item">
					<text v-if="item.type === 'text'" class="text">{{ item.value }}</text>
					<image v-if="item.type === 'image'" :src="url()+item.src" mode="widthFix" class="image" />
				</view>
				<!-- <rich-text :nodes="text1"></rich-text>
				<image src="/static/gywm.png" style="width: 100%;padding: 15px 0px;" mode="aspectFit">
				</image>
				<rich-text :nodes="text2"></rich-text> -->
			</view>
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		showAboutUs,
		url
	} from '@/request/api.js';
	const items = ref([]);
	// {
	// 	type: 'text',
	// 	value: '成长之路家政服务位于湖南省龙山县团结路东立印象负一楼07号，已经注册公司，正规经营，立志打造一支高素质高效率的规范团队，我们本着劳动最光荣的服务心理，认真对待每一个客户，坚持做好自己，不断学习努力，提高自己价值，为广大客户提供更好的服务。'
	// }, {
	// 	type: 'image',
	// 	src: '/static/gywm.png'
	// }, {
	// 	type: 'text',
	// 	value: '我们公司的重要标语:细节决定成败! 态度决定一切!坚持做好每一个细节，给客户一个很好的服务质量，相信在不久的将来，我们会是一支最棒的团队, 欢迎各界人士咨询合作, 共创美好未来!'
	// }
	const isEditActive = ref(false);

	// 在 onMounted 中添加错误处理
	onMounted(async () => {
		try {
			const list = await showAboutUs({
				type: '关于我们'
			});
			console.log(list);
			// 将多个 JSON 字符串合并为一个有效的 JSON 数组字符串
			let combinedJsonString = '[' + list.data.data.minute.replace(/}{/g, '},{') + ']';
			// 解析合并后的 JSON 数组字符串
			let retrievedArray = JSON.parse(combinedJsonString);
			items.value = retrievedArray
			// console.log(retrievedArray);
		} catch (error) {
			console.error("Failed to fetch data:", error);
			// 处理错误，例如显示一个错误消息
		}
	});
</script>

<style scoped>
	.image {
		width: 100%;
	}

	/* .text {
		padding: 10px;
	} */

	.item {
		margin-bottom: 30px;
		position: relative;
	}

	.notice-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: #efefef;
	}

	.notice-item {
		margin-bottom: 20rpx;
		height: auto;
		/* 修改为auto以适应内容高度 */
		border-radius: 22rpx;
		background-color: white;
		padding: 15px 10px;
		width: 95%;
	}

	.notice-image {
		width: 250rpx;
		height: 160rpx;
		margin-bottom: 10px;
	}

	.notice-title {
		padding: 20px 0px;
		font-weight: bold;
		font-size: 18px;
	}

	.notice-content {
		color: #666;
		font-size: 14px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}

	.notice-date {
		color: #999;
		font-size: 13px;
	}
</style>